<template>
	<view>
		<form @submit="savepubinfo" report-submit>
			<view class="container">
				<view class="main">
					<view class="title">
						<view>企业注册 【当前城市:{{ city }}】</view>
						<navigator url="../city/index?id=5" hover-class="none">
							<view style="color: red; font-weight: bold">切换城市</view>
						</navigator>
					</view>
					<view class="list">
						<view class="item">
							<view class="name">选择区域</view>
							<view class="selectitem">
								<picker :value="Index" :range="arealist" range-key="name" @change="bindAreaChange">
									<view class="picker">
										{{ areaidindex ? arealist[areaidindex].name : '请选择地区' }}
									</view>
								</picker>
							</view>
						</view>
						<view class="item">
							<view class="name">企业名称</view>
							<view class="selectitem">
								<input :value="companyinfo.companyname ? companyinfo.companyname : ''" type="text"
									name="companyname" placeholder="请输入企业名称" cursor-spacing="140" />
							</view>
						</view>

						<view class="item">
							<view class="name">企业行业</view>
							<view class="selectitem">
								<picker :value="Index" :range="jobcate" range-key="name" @change="bindJobcateChange">
									<view class="picker">
										{{ jobcateindex ? jobcate[jobcateindex].name : '请选择期望行业' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">企业性质</view>
							<view class="selectitem">
								<picker :value="Index" :range="companytype" range-key=""
									@change="bindCompanytypeChange">
									<view class="picker">
										{{ companytypeindex ? companytype[companytypeindex] : '请选择企业性质' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">人员规模</view>
							<view class="selectitem">
								<picker :value="Index" :range="companyworker" range-key=""
									@change="bindCompanyworkerChange">
									<view class="picker">
										{{ companyworker[companyworkerindex] ? companyworker[companyworkerindex] : '请选择人员规模' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">负责人</view>
							<view class="selectitem">
								<input type="text" :value="companyinfo.mastername ? companyinfo.mastername : ''"
									name="mastername" placeholder="请输入负责人" cursor-spacing="140" />
							</view>
						</view>

						<view class="item">
							<view class="name">电 话</view>
							<view class="selectitem">
								<input type="text" :value="companyinfo.tel ? companyinfo.tel : ''" name="tel"
									placeholder="请输入电话" cursor-spacing="140" />
							</view>
						</view>

						<view class="item">
							<view class="name">地址</view>
							<view class="selectitem">
								<input type="text" :value="address" name="address" placeholder="请输入地址" />
								<button class="getpos" @tap="getpostion">获取位置</button>
							</view>
						</view>
						<view class="item">
							<view class="name">登录账号</view>
							<view class="selectitem"><input type="text" value="" name="account" placeholder="请输入登录账号"
									cursor-spacing="140" /></view>
						</view>

						<view class="item">
							<view class="name">密码</view>
							<view class="selectitem"><input type="password" value="" name="password"
									placeholder="请输入登录密码" cursor-spacing="140" /></view>
						</view>
						<view class="item">
							<view class="name">确认密码</view>
							<view class="selectitem"><input type="password" value="" name="password2"
									placeholder="请再次输入密码" cursor-spacing="140" /></view>
						</view>
					</view>
				</view>

				<view class="main">
					<view class="title">公司介绍</view>
					<view class="list">
						<view class="item">
							<view class="selectitem2" style="width: 100%">
								<textarea name="content" placeholder="请填写公司介绍" :value="companyinfo.content"
									maxlength="-1" />
							</view>
						</view>
					</view>
				</view>

				<view class="uploadlist">
					<view class="title">
						<view>企业LOGO</view>
						<view>(禁止上传不良图片)</view>
					</view>
					<view class="item">
						<view class="uploadimg" @tap="chooseImg" data-id="1">
							<image src="/static/imgs/icon/upload.png"></image>
							<view class="uploadtitle">上传照片最多1张</view>
						</view>
					</view>
				</view>

				<view class="uploadlist" :style="'display:' + show1 + ';'">
					<view class="imgsbox">
						<view class="weui-uploader">
							<view class="img-v">
								<view class="img" v-for="(item, index) in imgs1" :key="index">
									<image :src="item" :data-index="index" mode="aspectFill" @tap="previewImg1"></image>

									<view class="delete-btn" :data-index="index" @tap.stop.prevent="deleteImg1">
										<image class="imgx" src="/static/imgs/icon/x.png"
											style="width: 15rpx; height: 15rpx"></image>
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="uploadlist">
					<view class="title">
						<view>企业执照或相关证件</view>
						<view>(禁止上传不良图片)</view>
					</view>
					<view class="item">
						<view class="uploadimg" @tap="chooseImg" data-id="2">
							<image src="/static/imgs/icon/upload.png"></image>
							<view class="uploadtitle">上传照片最多9张</view>
						</view>
					</view>
				</view>

				<view class="uploadlist" :style="'display:' + show2 + ';'">
					<view class="imgsbox">
						<view class="weui-uploader">
							<view class="img-v">
								<view class="img" v-for="(item, index) in imgs2" :key="index">
									<image :src="item" :data-index="index" mode="aspectFill" @tap="previewImg1"></image>

									<view class="delete-btn" :data-index="index" @tap.stop.prevent="deleteImg2">
										<image class="imgx" src="/static/imgs/icon/x.png"
											style="width: 15rpx; height: 15rpx"></image>
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="uploadlist">
					<view class="title">
						<view>企业环境照片</view>
						<view>(禁止上传不良图片)</view>
					</view>
					<view class="item">
						<view class="uploadimg" @tap="chooseImg" data-id="3">
							<image src="/static/imgs/icon/upload.png"></image>
							<view class="uploadtitle">上传照片最多9张</view>
						</view>
					</view>
				</view>

				<view class="uploadlist" :style="'display:' + show3 + ';'">
					<view class="imgsbox">
						<view class="weui-uploader">
							<view class="img-v">
								<view class="img" v-for="(item, index) in imgs3" :key="index">
									<image :src="item" :data-index="index" mode="aspectFill" @tap="previewImg1"></image>

									<view class="delete-btn" :data-index="index" @tap.stop.prevent="deleteImg3">
										<image class="imgx" src="/static/imgs/icon/x.png"
											style="width: 15rpx; height: 15rpx"></image>
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="doagree">
					<checkbox-group @change="doagree">
						<checkbox value="1" :checked="isagree === 1" />
						我已阅读并同意
						<text style="color: blue" @tap="toArticleDetail" data-id="60">《企业入驻协议》</text>
					</checkbox-group>
				</view>
			</view>

			<view class="weixinmao-float">
				<view class="weixinmao-foot">
					<button class="footer" formType="submit">注册企业信息</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		Company
	} from '../../model/company-model.js';
	var company = new Company();
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				logoimglist: [],
				imagelist: [],
				cardimglist: [],
				companyimglist: [],
				arealist: [],
				areaidindex: '',
				areaid: 0,
				lat: 0,
				lng: 0,
				companyworker: ['1-5人', '5-10人', '10-20人', '20-50人', '50人以上'],
				companyworkerindex: -1,
				companyworkername: '',
				companytype: ['私营', '国有', '政府机关', '事业单位', '股份制', '上市公司', '中外合资/合作', '外商独资/办事处', '非盈利机构'],
				companytypeindex: -1,
				companytypename: '',
				isagree: 0,
				show1: 'none',
				show2: 'none',
				show3: 'none',
				jobcate: '',
				city: '',
				jobcateindex: '',
				address: '',
				imgs1: [],
				imgs2: '',
				imgs3: '',
				Index: 0,
				name: false,

				companyinfo: {
					companyname: false,
					mastername: false,
					tel: false,
					content: ''
				}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			var that = this;
			that.id = options.id;
			uni.setNavigationBarTitle({
				title: '企业注册'
			});
			var companyid = uni.getStorageSync('companyid');
			//初始化导航数据

			var cityinfo = uni.getStorageSync('cityinfo');
			console.log(cityinfo);
			if (cityinfo) {
				uni.setStorageSync('city', cityinfo.name);
				that.initpage();
			} else {
				//获取信息
				qqmapsdk = new QQMapWX({
					key: '5D3BZ-J55WF-SFPJJ-NI6PG-YN2ZO-M4BHX' // 必填
				});

				uni.getLocation({
					type: 'gcj02',
					// 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: function(res) {
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(addressRes) {
								var address = addressRes.result.address_component.city;
								var city = address.substr(0, address.length - 1);
								//  console.log(city);
								uni.setStorageSync('city', city);
								that.initpage();
							}
						});
					},
					fail: function() {
						// fail

						that.initpage();
					},
					complete: function() {
						// complete
					}
				});
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			toArticleDetail: function(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/articledetail/index?id=' + id
				});
			},

			initpage: function() {
				var that = this;
				var city;
				city = uni.getStorageSync('city');
				var params = {
					city: city
				};
				console.log(params);
				company.getCompanyRegisterInit((data) => {
					that.setData({
						jobcate: data.jobcatelist,
						arealist: data.arealist,
						city: city
					});
				}, params);
			},

			bindJobcateChange: function(e) {
				var jobcate = this.jobcate;
				if (jobcate) {
					this.jobcateindex = e.detail.value;
					this.jobcateid = jobcate[e.detail.value].id;
					this.companycate = jobcate[e.detail.value].name;
				}
				this.setData({
					jobcate: jobcate,
					jobcateindex: e.detail.value
				});
			},

			bindAreaChange: function(e) {
				var arealist = this.arealist;
				if (arealist) {
					this.areaid = arealist[e.detail.value].id;
					this.areaidindex = e.detail.value;
				}
				this.setData({
					arealist: arealist,
					areaidindex: e.detail.value
				});
			},

			bindCompanytypeChange: function(e) {
				var companytype = this.companytype;
				if (companytype) {
					this.companytypeindex = e.detail.value;
					this.companytypename = companytype[e.detail.value];
				}
				this.setData({
					companytype: companytype,
					companytypeindex: e.detail.value
				});
			},

			getpostion: function() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						that.lat = res.latitude;
						that.lng = res.longitude;
						that.setData({
							address: res.name
						});
					},
					fail: function(res) {
						// fail
						console.log(res);
					},
					complete: function() {
						// complete
					}
				});
			},

			bindCompanyworkerChange: function(e) {
				var companyworker = this.companyworker;
				if (companyworker) {
					this.companyworkerindex = e.detail.value;
					this.companyworkername = companyworker[e.detail.value];
				}
				this.setData({
					companyworker: companyworker,
					companyworkerindex: e.detail.value
				});
			},

			savepubinfo: function(e) {
				var that = this;

				/*
    var form_id = e.detail.formId;
    var userinfo = wx.getStorageSync('userInfo');
      if(!userinfo)
    {
        that.data.isuser = false;
        that.setData({
          isuser: that.data.isuser
        })
        return
    }
    
    */

				if (that.isagree == 0) {
					uni.showModal({
						title: '提示',
						content: '请先同意企业入驻协议',
						showCancel: false,
						success: function(res) {}
					});
					return;
				}
				var companyname = e.detail.value.companyname;
				var companycate = that.companycate;
				var companytype = that.companytypename;
				var companyworker = that.companyworkername;
				var mastername = e.detail.value.mastername;
				var tel = e.detail.value.tel;
				var address = e.detail.value.address;
				var account = e.detail.value.account;
				var password = e.detail.value.password;
				var password2 = e.detail.value.password2;
				var content = e.detail.value.content;
				var id = that.id;
				var areaid = that.areaid;
				if (areaid == 0) {
					uni.showModal({
						title: '提示',
						content: '请选择区域',
						showCancel: false
					});
					return;
				}
				if (companyname == '') {
					uni.showModal({
						title: '提示',
						content: '请输入企业名称',
						showCancel: false
					});
					return;
				}
				if (mastername == '') {
					uni.showModal({
						title: '提示',
						content: '请输入负责人',
						showCancel: false
					});
					return;
				}
				if (tel == '') {
					uni.showModal({
						title: '提示',
						content: '请填写手机号',
						showCancel: false
					});
					return;
				} else {
					if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel)) {
						uni.showModal({
							title: '提示',
							content: '手机号有误,请重新填写',
							showCancel: false
						});
						return;
					}
				}
				if (account == '') {
					uni.showModal({
						title: '提示',
						content: '请输入登录账号',
						showCancel: false
					});
					return;
				} else {
					var re = /^[a-zA-z]\w{3,15}$/;
					if (!re.test(account)) {
						uni.showModal({
							title: '提示',
							content: '登录账号以字母开头与数字组合',
							showCancel: false
						});
						return;
					}
				}
				if (password == '') {
					uni.showModal({
						title: '提示',
						content: '请输入登录密码',
						showCancel: false
					});
					return;
				} else {
					var re = /^(\w){6,20}$/;
					if (!re.test(password)) {
						uni.showModal({
							title: '提示',
							content: '登录密码以6-20个字母、数字、下划线 ',
							showCancel: false
						});
						return;
					}
				}
				if (password2 == '') {
					uni.showModal({
						title: '提示',
						content: '请输入确认密码',
						showCancel: false
					});
					return;
				}
				if (password != password2) {
					uni.showModal({
						title: '提示',
						content: '两次密码不一致',
						showCancel: false
					});
					return;
				}
				var tid = 0;
				if (uni.getStorageSync('tid')) {
					tid = uni.getStorageSync('tid');
				}
				if (that.logoimglist.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请上传企业LOGO',
						showCancel: false
					});
					return;
				}
				if (that.cardimglist.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请上传企业执照',
						showCancel: false
					});
					return;
				}
				if (that.companyimglist.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请上传企业证件或相关证件',
						showCancel: false
					});
					return;
				}
				var cardimgstr = that.cardimglist.join(',');
				var companyimgstr = that.companyimglist.join(',');
				var logoimglist = that.logoimglist;
				var cityinfo = uni.getStorageSync('cityinfo');
				var params = {
					areaid: areaid,
					cityid: cityinfo.id,
					companyname: companyname,
					companycate: companycate,
					companytype: companytype,
					companyworker: companyworker,
					mastername: mastername,
					tel: tel,
					address: address,
					account: account,
					password: password,
					content: content,
					lat: that.lat,
					lng: that.lng,
					cardimg: cardimgstr,
					companyimg: companyimgstr,
					thumb: logoimglist[0],
					tid: tid
				};

				// console.log(params);

				//  return;

				company.Savecompany((data) => {
					if (data.status == 0) {
						uni.showModal({
							title: '提示',
							content: '注册成功,请等待审核',
							showCancel: false,
							success: function() {
								uni.reLaunch({
									url: '/pages/companylogin/index'
								});
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: data.msg,
							showCancel: false
						});
					}
				}, params);
			},

			doagree: function(e) {
				var isagree = e.detail.value;
				if (isagree.length > 0) {
					this.isagree = isagree[0];
				} else {
					this.isagree = 0;
				}

				//

				console.log(this.isagree);
			},

			deleteImg1: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				that.logoimglist = [];
				that.setData({
					imgs1: [],
					show1: 'none'
				});
				console.log(index);
			},

			deleteImg2: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var cardimglist = [];
				var imgs2 = [];
				for (var i = 0; i < that.cardimglist.length; i++) {
					if (i != index) {
						cardimglist.push(that.cardimglist[i]);
						imgs2.push(that.imgs2[i]);
					}
				}
				that.cardimglist = cardimglist;
				that.imgs2 = imgs2;
				that.setData({
					imgs2: imgs2
					// show2: 'none'
				});

				if (that.cardimglist.length == 0) {
					that.setData({
						show2: 'none'
					});
				}
			},

			deleteImg3: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var companyimglist = [];
				var imgs3 = [];
				for (var i = 0; i < that.companyimglist.length; i++) {
					if (i != index) {
						companyimglist.push(that.companyimglist[i]);
						imgs3.push(that.imgs3[i]);
					}
				}
				that.companyimglist = companyimglist;
				that.imgs3 = imgs3;
				that.setData({
					imgs3: imgs3
					// show2: 'none'
				});

				if (that.companyimglist.length == 0) {
					that.setData({
						show3: 'none'
					});
				}
			},

			chooseImg: function(e) {
				var that = this;
				var count = 9;
				var id = parseInt(e.currentTarget.dataset.id);
				if (id == 1) {
					count = 1;
				}
				uni.chooseImage({
					count: count,
					// 默认9
					sizeType: ['compressed'],
					// 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					// 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

						var tempFilePaths = res.tempFilePaths;
						var imgs = [];
						if (id == 1) {
							that.logoimglist = [];
							that.setData({
								imgs1: tempFilePaths,
								show1: 'block'
							});
						} else if (id == 2) {
							that.cardimglist = [];
							that.imgs2 = tempFilePaths;
							that.setData({
								imgs2: tempFilePaths,
								show2: 'block'
							});
						} else if (id == 3) {
							that.companyimglist = [];
							that.imgs3 = tempFilePaths;
							that.setData({
								imgs3: tempFilePaths,
								show3: 'block'
							});
						}

						// var tempFilePaths = that.data.imgs

						for (var s = 0; s < tempFilePaths.length; s++) {
							console.log(tempFilePaths[s]);
							that.uploadimg(tempFilePaths[s], id);
						}
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			uploadimg: function(path, id) {
				//var uploadurl = app.util.geturl({ 'url': 'entry/wxapp/upload' });
				// var id = id;
				uni.showToast({
					icon: 'loading',
					title: '正在上传'
				});
				var that = this;
				var params = {
					path: path
				};
				company.uploadimg((data) => {
					console.log(1111,data);
					if (id == 1) {
						console.log(data.imgpath);
						that.logoimglist.push(data.imgpath);
						console.log(that.logoimglist);
					} else if (id == 2) {
						that.cardimglist.push(data.imgpath);
					} else if (id == 3) {
						that.companyimglist.push(data.imgpath);
					}
				}, params);
			},

			previewImg1() {
				console.log('占位：函数 previewImg1 未声明');
			}
		}
	};
</script>
<style>
	.container {
		background-color: #f5f5f5;

		padding-bottom: 180rpx;
	}

	.container .main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.container .main .title {
		width: 730rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-size: 0.9rem;
		padding-left: 20rpx;
		color: #888888;
		display: flex;
		flex-direction: row;
	}

	.container .main .list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
	}

	.container .main .list .item {
		width: 700rpx;
		border-bottom: 1rpx solid #f5f5f5;
		align-self: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.container .main .list .item .name {
		font-size: 14px;
		color: #a2a2a2;
	}

	.container .main .list .item .selectitem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #808080;
		font-size: 14px;
		height: 100rpx;
		line-height: 100rpx;
		background: #fff;
	}

	.container .main .list .item .selectitem2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #808080;
		font-size: 14px;

		background: #fff;
	}

	.container .main .list .item .selectitem input {
		height: 100rpx;
		width: 740rpx;
		color: #000;
		font-size: 18px;
	}

	.container .main .list .item .selectitem>image {
		width: 30rpx;
		height: 30rpx;
		align-self: center;
	}

	.radio {
		font-size: 18px;
	}

	.picker {
		font-size: 18px;
	}

	.container .main .checklist {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		background: #fff;
		flex-wrap: wrap;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.container .main .checklist checkbox-group {
		width: 720rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.container .main .checklist .checkitem {
		font-size: 0.7rem;
		width: 240rpx;
		margin-top: 10rpx;
	}

	.container .doagree {
		font-size: 0.7rem;
		margin-left: 50rpx;
		margin-top: 40rpx;
	}

	.getpos {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 0.7rem;
	}

	.container .main .imglist {
		width: 720rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		background: #fff;
	}

	.container .main .imglist .imgitem {
		width: 200rpx;
		border: 1rpx dotted #f5f5f5;
		position: relative;
	}

	.container .main .imglist .imgitem image {
		width: 200rpx;
		height: 200rpx;
	}

	.sum {
		position: absolute;
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		background: #3274e5;
		top: -10rpx;
		left: 150rpx;
		color: #fff;
		z-index: 1000;
		font-size: 0.7rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.sum text {
		font-size: 0.7rem;
		align-self: center;
	}

	.weixinmao-msg {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 2001;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.weixinmao-content {
		width: 720rpx;
		height: 450rpx;
		z-index: 4001;
		background: #fff;
		align-self: center;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.map {
		height: 850rpx;
	}

	.mapbtn {
		background: #3274e5;
		color: #fff;
		font-size: 1rem;
		width: 400rpx;
	}

	.weixinmao-content .title {
		border-bottom: 1rpx solid #e5e5e5;
		width: 100%;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 0.8rem;
		background: #3274e5;
		color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.weixinmao-content .title view:nth-child(1) {
		width: 30%;
	}

	.weixinmao-content .title view:nth-child(2) {
		width: 40%;
	}

	.weixinmao-content .title view:nth-child(3) {
		width: 30%;
	}

	.weixinmao-content .list {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.weixinmao-content .list .item {
		width: 100%;
		align-self: center;
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.weixinmao-foot {
		display: flex;
		justify-content: center;
		flex-direction: row;

		width: 100%;
	}

	.weixinmao-foot view {
		color: #fff;
		align-self: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 0.9rem;
		display: flex;
		flex-direction: row;
		width: 50%;
		border-radius: 0rpx;
		padding-left: 30rpx;
		background: #e64340;
	}

	.weixinmao-foot button {
		background: #07b56d;
		width: 100%;
		color: #fff;
		border-radius: 0rpx;
		font-size: 1rem;
	}

	.ismaster {
		color: red;
		font-weight: bold;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 30rpx;
		align-self: center;
	}

	.masterbtn {
		margin-top: 100rpx;
		width: 400rpx;
		background: #3274e5;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 5rpx;
		text-align: center;
	}

	.selectitem textarea {
		width: 100%;
	}

	.weixinmao-msg-userinfo {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 2001;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.weixinmao-content-userinfo {
		width: 650rpx;
		height: 100%;
		z-index: 4001;
		background: #fff;
		align-self: center;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.weixinmao-content-userinfo .userinfo-title {
		align-self: center;
		font-size: 1.2rem;
		margin-top: 40rpx;
	}

	.weixinmao-content-userinfo .userinfo-content {
		align-self: center;
		font-size: 0.9rem;
		padding: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999999;
	}

	.weixinmao-content-userinfo .userinfo-img {
		align-self: center;

		font-size: 0.9rem;
	}

	.weixinmao-content-userinfo .userinfo-img image {
		align-self: center;

		width: 400rpx;
		height: 400rpx;
	}

	.userinfo-button {
		display: flex;
		flex-direction: row;
		width: 400rpx;

		align-items: baseline;
		padding-bottom: 20rpx;
	}

	.userinfo-button button {
		background: #44b549;
		font-size: 0.8rem;
		color: #fff;
		width: 300rpx;
	}

	.uploadlist {
		display: flex;
		width: 700rpx;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.uploadlist .title {
		width: 700rpx;
		color: #141c31;
		font-weight: bold;
		font-size: 1.1rem;
		align-self: left;
	}

	.uploadlist .item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 20rpx;
		width: 650rpx;
	}

	.uploadlist .title view:nth-child(2) {
		color: #808080;
		font-size: 0.7rem;
		font-weight: 300;
		margin-top: 10rpx;
	}

	.uploadlist .item .uploadimg {
		width: 300rpx;
		height: 300rpx;
		border-radius: 5rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uploadlist .item .uploadimg image {
		width: 120rpx;
		height: 120rpx;
	}

	.uploadlist .item .uploadimg .uploadtitle {
		color: #808080;
		font-size: 0.7rem;
	}

	.imgsbox {
		width: 690rpx;
		padding: 20rpx;
		margin: auto;
		background: #fff;
		border-radius: 0 0 14rpx 14rpx;
		border: 1px solid #d6d7dc;

		box-sizing: border-box;
		overflow: hidden;
	}

	.weui-cells {
		font-size: 30rpx !important;
	}

	.weui-cell::before {
		border-top: 1rpx solid #eee;
	}

	.upload-img-btn image {
		width: 185rpx;
		height: 185rpx;
	}

	.upload-img-btn {
		float: left;
	}

	.img {
		width: 185rpx;
		height: 185rpx;
		float: left;
		margin: 15rpx;
		position: relative;
		overflow: hidden;
	}

	.delete-btn {
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		text-align: center;
		line-height: 40rpx;
		width: 100%;
	}

	.img image {
		width: 185rpx;
		height: 185rpx;
	}

	.weui-select {
		border-right: none;
	}

	.weui-uploader__hd {
		float: left;
	}

	.weui-uploader__title {
		width: 150rpx !important;
	}

	.weui-label {
		width: 150rpx !important;
	}

	.upload-img-btn image {
		margin: 10rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}
</style>